<template>
  <div class="img" :style="note">
    <div
      style="width: 450px;height: 900px;background-color: rgba(0,0,0,0.01);margin:0px auto;text-align: center;position: relative"
    >
      <div
        style="width: 450px;height: 600px;background-color: rgba(0,0,0,0.6);text-align: center;position: absolute;margin-top: 100px"
      >
        <p style="font-size: 28px;font-family: '楷体';padding-top: 20px;color: slategray">开发者注册</p>
        <hr style="width: 90%;height: 0.01px" />
        <div style="margin-top: 20px">
          <div style="width: 100%">
            <form style="width: 100%">
              <p style="width: 100%;margin-left: 150px; text-align: left;color: slategray">请上传头像</p>
              <input type="file" @change="getFile($event)" style="color: slategray" />
              <button
                class="button button-primary button-pill button-small"
                @click="submit($event)"
              >提交</button>
            </form>
          </div>
          <div style="margin-top: 40px">
            <div style="width: 70%;margin-top: 30px;margin-left: 50px">
              <span class="demonstration" style="color: slategray">业务范围</span>
              <el-cascader :options="options" v-model="selectedOptions" @change="handleChange"></el-cascader>
            </div>
            <el-input v-model="InputName" placeholder="请输入姓名" style="width: 70%;margin-top: 30px"></el-input>
            <el-input v-model="InputNo" placeholder="联系方式" style="width: 70%;margin-top: 30px"></el-input>
            <el-input
              type="textarea"
              :rows="2"
              placeholder="简单介绍"
              v-model="textarea"
              style="width: 70%;margin-top: 30px"
            ></el-input>
          </div>
          <div style="width: 100%">
            <el-button
              plain
              style="margin-top: 20px;width: 100px"
              size="small"
              @click="register()"
            >立即注册</el-button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      note: {
        backgroundImage: "url(" + require("../assets/img/starrr.jpg") + ")",
        backgroundRepeat: "no-repeat",
        backgroundSize: "1890px 1500px",
      },
      id: "",
      InputName: "",
      InputNo: "",
      CompanyUser: "",
      textarea: "",
      file: "",
      filee: "",
      options: [
        {
          value: "WEB后台",
          label: "WEB后台",
          children: [
            { value: "JAVA", label: "JAVA" },
            { value: "C#", label: "C#" },
            { value: "PHP", label: "PHP" },
            { value: "其他", label: "其他" },
          ],
        },
        {
          value: "WEB前端",
          label: "WEB前端",
          children: [
            { value: "VUE", label: "VUE" },
            { value: "HTML", label: "HTML" },
            { value: "JS", label: "JS" },
            { value: "其他", label: "其他" },
          ],
        },

        {
          value: "移动端",
          label: "移动端",
          children: [
            { value: "微信小程序", label: "微信小程序" },
            { value: "微信公众号", label: "微信公众号" },

            { value: "支付宝小程序", label: "支付宝小程序" },
            { value: "RN", label: "RN" },
            { value: "其他", label: "其他" },
          ],
        },
        {
          value: "大数据.人工智能",
          label: "大数据.人工智能",
          children: [
            { value: "数据采集", label: "数据采集" },
            { value: "数据分析", label: "数据分析" },
            { value: "人脸识别", label: "人脸识别" },
            { value: "其他", label: "其他" },
          ],
        },
      ],
      selectedOptions: [],
      selectedOptions2: [],
    };
  },
  methods: {
    getFile: function (evente) {
      this.file = event.target.files[0];
      console.log(this.file);
    },
    getFilee: function (event) {
      this.filee = event.target.files[0];
      console.log(this.filee);
    },
    submit: function (event) {
      //阻止元素发生默认的行为
      var _this = this;
      event.preventDefault();
      let formData = new FormData();
      console.log(formData);
      formData.append("file", this.file);
      axios
        .post("http://localhost:8092/upload/singlefile", formData)
        .then(function (response) {
          alert("上传成功");
          console.log(response);
          var a = response.data;
          //var e=a.split("*");
          //console.log(e[1])
          _this.file = a;
          // window.location.reload();
        })
        .catch(function (error) {
          alert("上传失败");
          console.log(error);
          //window.location.reload();
        });
    },
    submite: function (event) {
      var _this = this;
      //阻止元素发生默认的行为
      event.preventDefault();
      let formData = new FormData();
      console.log(formData);
      formData.append("file", this.filee);
      axios
        .post("http://localhost:8092/upload/singlefile", formData)
        .then(function (response) {
          alert(response.data);
          console.log(response);
          var a = response.data;
          //  var e=a.split("*");
          // console.log(e[1])
          _this.filee = a;
        })
        .catch(function (error) {
          alert("上传失败");
          console.log(error);
          //window.location.reload();
        });
    },

    register() {
      var hh = this.selectedOptions.toString();

      var user = JSON.parse(window.sessionStorage.getItem("user"));
      this.id = user.id;
      axios
        .post("http://localhost:8092/user/insertDeveloper", {
          uid: this.id,
          namee: this.InputName,
          phone: this.InputNo,
          introduce: this.textarea,
          photo: this.file,
          lable: hh,
        })
        .then((response) => {
          if (response.data.states == 800) {
            this.$notify({
              title: "成功",
              message: "注册成功",
              type: "success",
              duration: 1000,
            });

            this.$router.replace("/Index");
          } else {
            this.$notify.error({
              title: "错误",
              message: response.data.message,
              type: "warning",
              duration: 0,
            });
          }
        })
        .catch((response) => {});
    },
  },
};
</script>

<style scoped>
</style>
